import React from 'react'
import { RouterProvider } from 'react-router-dom'
import route from './router'


import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { NavBar } from 'react-vant';
function App() {
  let data=[
    {
      img:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      ming:'磁膜邮寄PWE美白洗面奶',
      price:169
    },
    {
      img:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      ming:'磁膜邮寄PWE美白洗面奶',
      price:169
    },
    {
      img:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      ming:'磁膜邮寄PWE美白洗面奶',
      price:169
    },

  ]
  const onChange = (key: string) => {
  console.log(key);
};
const items: TabsProps['items'] = [
  {
    key: '1',
    label: '全部订单',
    children: <div>
      {
        data.map((item,index)=>{
          return <div style={{display:'flex',border:'1px solid #eee',margin:'10px'}} key={index}>
            <img style={{width:'50px',height:'50px',margin:'10px'}} src={item.img} alt="" />
            <p>{item.ming}</p>
            <p>{item.price}</p>
          </div>
        })
      }
    </div>,
  },
  {
    key: '2',
    label: '待付款',
    children: <div>
      {
        data.map((item,index)=>{
          return <div style={{display:'flex'}} key={index}>
            <img style={{width:'50px',height:'50px'}} src={item.img} alt="" />
            <p>{item.ming}</p>
            <p>{item.price}</p>
          </div>
        })
      }
    </div>
  },
  {
    key: '3',
    label: '代发货',
    children: <div>
      {
        data.map((item,index)=>{
          return <div style={{display:'flex'}} key={index}>
            <img style={{width:'50px',height:'50px'}} src={item.img} alt="" />
            <p>{item.ming}</p>
            <p>{item.price}</p>
          </div>
        })
      }
    </div>,
  },
];

  return (
    <div>
      <RouterProvider router={route}></RouterProvider>
     <NavBar>我的订单</NavBar>
     <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  )
}

export default App
